<template>
  <a-modal
    :visible="dialogVisible"
    :footer="null"
    @cancel="dialogVisible = false"
    width="70%"
    :destroyOnClose="true"
  >
    <div slot="title" style="display: flex;">
      <p style="margin-right: 20px !important;white-space:nowrap">流程配置信息</p>
      <a-button-group>
        <a-button :disabled="showcode" :type="showcode?'link':'primary'" @click="showcode=true" size="small" > <a-icon type="left" />代码</a-button>
        <a-button @click="exp_visible = true" icon="cloud-download" size="small" title="导出配置" />
        <!-- <a-button @click="downloadConf2" icon="cloud-download" size="small" title="导出JSON" /> -->
        <a-button :disabled="!showcode" :type="!showcode?'link':'primary'" @click="showcode=false" size="small" >描述<a-icon type="right" /> </a-button>
      </a-button-group>      
    </div>
    <codemirror
      v-if="showcode"
      :value="flowJsonData" 
      :options="options" 
    />
    <model-confs
      v-else
      :confdata="confdata"
    />
    
    <a-modal 
      v-model="exp_visible" 
      title="导出配置文件" 
      okText="导出"
      cancelText="取消"
      :confirm-loading="exp_loading"
      @cancel="exp_visible=false"
      @ok="exportConf"
    >
      <p>请选择导出格式：</p>
      <a-radio-group v-model="exp_type" style="padding-left:1em">
        <a-radio :style="{display:'flex',alignItems:'center'}" value="txt">
          <p>txt文件,包含样本集信息和参数信息,可<span style="color:red;">用于导入</span>创建模型</p>
        </a-radio>
        <a-radio :style="{display:'flex',alignItems:'center'}" value="json">
          <p>JSON文件,只含参数信息,同<span style="color:red;">运行</span>时的<span style="color:red;">配置文件</span></p>
        </a-radio>
      </a-radio-group>
      <p>文件名：</p>
      <p style="padding-left:1em">默认</p>
    </a-modal>
  </a-modal>
</template>
<script>
  import 'codemirror/lib/codemirror.css'
  import modelConfs from './modal_confinfo_text'
  import {
    codemirror
  } from 'vue-codemirror'
  import { exportFile,dateFormat,sleep } from '@/utils/functions'
  import { encode } from 'js-base64'
  require("codemirror/mode/javascript/javascript.js")
  
  export default {
    props: {
      confdata: Object | Array,
    },
    components: { codemirror,modelConfs },
    data() {
      return {
        dialogVisible: false,
        showcode:true,
        flowJsonData: {},
        exp_visible:false,
        exp_type:'txt',
        exp_loading:false,
        options: {
          mode: {
            name: "javascript",
            json: true
          },
          // theme: "liquibyte",
          lineWrapping: true,
          lineNumbers: true,
          tabSize:2,
          indentWithTabs:true,
        }
      }
    },
    methods: {
      init() {
        console.log({confdata:this.confdata})
        this.dialogVisible = true
        this.flowJsonData = JSON.stringify(this.confdata, null, 2).toString()
      },
      async exportConf(){//   json || txt
        this.exp_loading = true
        const { exp_type } = this
        const type = exp_type==='txt'
        // const loadingmsg = this.$message.loading("参数导出",0)
        let ENCODE_SAVE_DATA 
        if(type){
          const data = this._cloneDeep(this.confdata)
          delete data.modelInfo
          ENCODE_SAVE_DATA = await encode(JSON.stringify(data))
        }else{
          const {
            variableConfiguration,verifMode,
            missing,homogeny,
            importanceAssessment,
            corr,
            binn,
            regre,
            exchangeParam,
            } = this._cloneDeep(this.confdata)
          const data = []
          data.push({variableConfiguration,verifMode})
          data.push({missing,homogeny})
          data.push({importanceAssessment})
          data.push({corr})
          data.push({binn})
          data.push({regre})
          data.push({exchangeParam})
          data.push({})
          ENCODE_SAVE_DATA = JSON.stringify(data, null, 2).toString()
        }
        const EXPORT_CONTENT = await encodeURIComponent(ENCODE_SAVE_DATA)
        const url = `data:text/plain;charset=utf-8,${EXPORT_CONTENT}`
        const fileName = type?`配置导出-${dateFormat('YYYY-MM-DD',new Date())}.txt`:`config_sc.json`
        await sleep(1000)
        exportFile(url,fileName)
        // loadingmsg()
        this.$message.success('导出成功')
        if(type) this.$message.info("直接将配置文件拖入即可导入")
        this.exp_loading = false
      }
    }
  }
</script>

<style scoped>
  .ant-btn-link[disabled]{
    color:#1890ff !important;
  }
</style>

<!-- codemirror -->
<!-- 
<style>
  .cm-s-liquibyte.CodeMirror {
  	background-color: #000;
  	color: #fff;
  	line-height: 1.2em;
  	font-size: 1em;
  }
  .cm-s-liquibyte .CodeMirror-focused .cm-matchhighlight {
  	text-decoration: underline;
  	text-decoration-color: #0f0;
  	text-decoration-style: wavy;
  }
  .cm-s-liquibyte .cm-trailingspace {
  	text-decoration: line-through;
  	text-decoration-color: #f00;
  	text-decoration-style: dotted;
  }
  .cm-s-liquibyte .cm-tab {
  	text-decoration: line-through;
  	text-decoration-color: #404040;
  	text-decoration-style: dotted;
  }
  .cm-s-liquibyte .CodeMirror-gutters { background-color: #262626; border-right: 1px solid #505050; padding-right: 0.8em; }
  .cm-s-liquibyte .CodeMirror-gutter-elt div { font-size: 1.2em; }
  .cm-s-liquibyte .CodeMirror-guttermarker {  }
  .cm-s-liquibyte .CodeMirror-guttermarker-subtle {  }
  .cm-s-liquibyte .CodeMirror-linenumber { color: #606060; padding-left: 0; }
  .cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #eee; }
  
  .cm-s-liquibyte span.cm-comment     { color: #008000; }
  .cm-s-liquibyte span.cm-def         { color: #ffaf40; font-weight: bold; }
  .cm-s-liquibyte span.cm-keyword     { color: #c080ff; font-weight: bold; }
  .cm-s-liquibyte span.cm-builtin     { color: #ffaf40; font-weight: bold; }
  .cm-s-liquibyte span.cm-variable    { color: #5967ff; font-weight: bold; }
  .cm-s-liquibyte span.cm-string      { color: #ff8000; }
  .cm-s-liquibyte span.cm-number      { color: #0f0; font-weight: bold; }
  .cm-s-liquibyte span.cm-atom        { color: #bf3030; font-weight: bold; }
  
  .cm-s-liquibyte span.cm-variable-2  { color: #007f7f; font-weight: bold; }
  .cm-s-liquibyte span.cm-variable-3, .cm-s-liquibyte span.cm-type { color: #c080ff; font-weight: bold; }
  .cm-s-liquibyte span.cm-property    { color: #999; font-weight: bold; }
  .cm-s-liquibyte span.cm-operator    { color: #fff; }
  
  .cm-s-liquibyte span.cm-meta        { color: #0f0; }
  .cm-s-liquibyte span.cm-qualifier   { color: #fff700; font-weight: bold; }
  .cm-s-liquibyte span.cm-bracket     { color: #cc7; }
  .cm-s-liquibyte span.cm-tag         { color: #ff0; font-weight: bold; }
  .cm-s-liquibyte span.cm-attribute   { color: #c080ff; font-weight: bold; }
  .cm-s-liquibyte span.cm-error       { color: #f00; }
  
  .cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.25); }
  
  .cm-s-liquibyte span.cm-compilation { background-color: rgba(255, 255, 255, 0.12); }
  
  .cm-s-liquibyte .CodeMirror-activeline-background { background-color: rgba(0, 255, 0, 0.15); }
  
  /* Default styles for common addons */
  .cm-s-liquibyte .CodeMirror span.CodeMirror-matchingbracket { color: #0f0; font-weight: bold; }
  .cm-s-liquibyte .CodeMirror span.CodeMirror-nonmatchingbracket { color: #f00; font-weight: bold; }
  .CodeMirror-matchingtag { background-color: rgba(150, 255, 0, .3); }
  /* Scrollbars */
  /* Simple */
  .cm-s-liquibyte div.CodeMirror-simplescroll-horizontal div:hover, .cm-s-liquibyte div.CodeMirror-simplescroll-vertical div:hover {
  	background-color: rgba(80, 80, 80, .7);
  }
  .cm-s-liquibyte div.CodeMirror-simplescroll-horizontal div, .cm-s-liquibyte div.CodeMirror-simplescroll-vertical div {
  	background-color: rgba(80, 80, 80, .3);
  	border: 1px solid #404040;
  	border-radius: 5px;
  }
  .cm-s-liquibyte div.CodeMirror-simplescroll-vertical div {
  	border-top: 1px solid #404040;
  	border-bottom: 1px solid #404040;
  }
  .cm-s-liquibyte div.CodeMirror-simplescroll-horizontal div {
  	border-left: 1px solid #404040;
  	border-right: 1px solid #404040;
  }
  .cm-s-liquibyte div.CodeMirror-simplescroll-vertical {
  	background-color: #262626;
  }
  .cm-s-liquibyte div.CodeMirror-simplescroll-horizontal {
  	background-color: #262626;
  	border-top: 1px solid #404040;
  }
  /* Overlay */
  .cm-s-liquibyte div.CodeMirror-overlayscroll-horizontal div, div.CodeMirror-overlayscroll-vertical div {
  	background-color: #404040;
  	border-radius: 5px;
  }
  .cm-s-liquibyte div.CodeMirror-overlayscroll-vertical div {
  	border: 1px solid #404040;
  }
  .cm-s-liquibyte div.CodeMirror-overlayscroll-horizontal div {
  	border: 1px solid #404040;
  }
</style> -->